//1.引入Vue和Vuex
import Vue from "vue"
import Vuex from "vuex"

// 2.使用Vuex
Vue.use(Vuex)

// 用于响应组建中的动作
const actions = {
  // 因为这两个函数没有做任何的逻辑处理，所以可以直接使用commit
  // jia:function(context,n){
  //   // context是执行上下文
  //   console.log("actions的jia被调用了",context,n);
  //   context.commit("JIA",n)
  // },
  // jian:function(context,n){
  //   context.commit("JIAN",n)
  // },
  jiaOdd: function (context, n) {
    if (context.state.sum % 2 != 0) {
      context.commit("JIAODD", n);
    }
  },
  jiaWait: function (context, n) {
    setTimeout(() => {
      context.commit("JIAWAIT", n);
    }, 500)
  }
};

// 用于操作数据(state)
const mutations = {
  JIA: function (value, n) {
    console.log("mutations里的JIA被调用了", value, n);
    value.sum += n;
  },
  JIAN: function (value, n) {
    value.sum -= n;
  },
  JIAODD(value, n) {
    value.sum += n;
  },
  JIAWAIT(value, n) {
    value.sum += n;
  },
  PERSONADD(value, obj) {
    //  console.log(value,obj);
    // 向personList里添加新的人对象
    value.personList.unshift(obj)
  }
};


// 当state中的数据需要经过加工后再使用时，可以使用getters加工
const getters = {
  bigSum(state) {
    return state.sum * 10;
  }
};

// 用于存储数据
const state = {
  // 当前的求和为；
  sum: 0,
  str1: "Vue",
  str2: "男神张",
  // Person组件的数据
  personList: [{
    id: 1001,
    name: "jason"
  }]
};

// 3.创建store，用于管理：state对象，actions对象,mutations对象
const store = new Vuex.Store({
  actions: actions,
  mutations: mutations,
  state: state,
  getters: getters,
});


// 4.导出store
export default store